<template>
    <div class="control">

        <!--S红包码-->
        <div class="control-child" v-if="redQrcode" @click="clickRedQrcode">
            <svg class="icon"><use xlink:href="#icon-qrcode"></use></svg>
            <p>红包码</p>
        </div>
        <!--E红包码-->

        <!--S开包记录-->
        <div class="control-child" v-if="record">
            <router-link :to="to_record_link" class="a">
                <svg class="icon"><use xlink:href="#icon-hongbao"></use></svg>
                <p>记录</p>
            </router-link>
        </div>
        <!--E开包记录-->

    </div>
</template>

<script>
    import store from "../../../../store/index";
    import { mapState } from "vuex"
    export default {
        name: "control",
        data(){
            return {
                qrcode:{  //红包码相关数据
                    //组成海报所需数据
                    canvas_data:{},
                    //canvas
                    canvas:null,  //canvas
                    context:null,  //canvas context
                    //image 各种所需图片对象
                    tpl:null,  //红包码模板
                    header:null,  //头像
                    qrcode:null,  //二维码
                    //0 = 红包海报码  纯净二维码
                    images:[]
                }
            }
        },
        props:{
          redId:{  //红包id
              type:String
          },
          owner:{   //红包所属用户的id
            type:String
          },
          record:{  //是否显示红包记录
              type:Boolean,
              default: true
          },
          redQrcode:{  //是否显示红包二维码
              type:Boolean,
              default:true
          },
          header:{
              type:String,
          }
        },
        computed:{
            //红包列表链接
            to_record_link(){
                let link = {};
                let page_name = this.$route.name;
                if(page_name == 'me-red-slide'){
                    link = {name:'me-red-slide-record',params:{red_id:this.redId}};
                }else{
                    link = {name:'record',params:{red_id:this.redId}};
                }
                return link;
            },
            ...mapState({
                uid:'uid'
            })
        },
        methods:{
            /**
             * 点击红包二维码
             */
            clickRedQrcode(){
                if(this.qrcode.images.length < 2){
                    this.getCreateQrcode()
                        .then(()=>{
                            return this.loadImages();
                        })
                        .then(()=>{
                            //合成海报
                            this.qrcode.canvas = document.createElement("canvas");
                            this.qrcode.context = this.qrcode.canvas.getContext("2d");

                            this.qrcode.canvas.width = this.qrcode.tpl.width;
                            this.qrcode.canvas.height = this.qrcode.tpl.height;
                            this.qrcode.context.drawImage(this.qrcode.tpl,0,0);
                            //头像
                            this.psHeader();

                            //二维码
                            this.psQrcode();

                            //红包title
                            this.psTitle();

                            //昵称
                            this.psNickname();

                            this.qrcode.images = [
                                this.qrcode.canvas.toDataURL('image/jepg',.8),
                                this.qrcode.canvas_data.qrcode
                            ]
                            store.commit("setPoster",{
                                show:true,
                                value:this.qrcode.images[0],
                                assist_value:parseInt(this.owner) === this.uid ? this.qrcode.images[1] : "",
                                assist_text:"纯净二维码",
                                onClose:()=>{
                                    store.commit("setPoster",{
                                        show:false,
                                        assist_value:""
                                    });
                                }
                            });
                        });
                }else{
                    store.commit("setPoster",{
                        show:true,
                        value:this.qrcode.images[0],
                        assist_value:this.owner === this.uid ? this.qrcode.images[1] : "",
                        assist_text:"纯净二维码",
                        onClose:()=>{
                            store.commit("setPoster",{
                                show:false,
                                assist_value:""
                            });
                        }
                    });
                }
            },
            /**
             * 获取生成二维码的素材
             */
            getCreateQrcode(){
                return new Promise((success)=>{
                    this.$url("redQrcode/canvasData",{
                        red_id:this.redId
                    })
                        .then((res)=>{
                            if(res.data.status === "success"){
                                this.qrcode.canvas_data = res.data.data;
                            }
                            success();
                        });
                });
            },
            /**
             * 监听生成红包码各种图片加载完成
             */
            loadImages(){
                this.qrcode.tpl = new Image();
                this.qrcode.tpl.setAttribute("crossOrigin","*");
                this.qrcode.tpl.src = this.qrcode.canvas_data.tpl;
                this.qrcode.header = new Image();
                this.qrcode.header.setAttribute("crossOrigin","*");
                this.qrcode.header.src = this.qrcode.canvas_data.header;
                this.qrcode.qrcode = new Image();
                this.qrcode.qrcode.setAttribute("crossOrigin","*");
                this.qrcode.qrcode.src = this.qrcode.canvas_data.qrcode;
                let tpl = new Promise((success)=>{
                    this.qrcode.tpl.onload = ()=>{
                        success(true);
                    }
                });
                let header = new Promise((success)=>{
                    this.qrcode.header.onload = ()=>{
                        success(true);
                    }
                });
                let qrcode = new Promise((success)=>{
                    this.qrcode.qrcode.onload = ()=>{
                        success(true);
                    }
                });
                return new Promise((success)=>{
                    Promise.all([tpl,header,qrcode])
                        .then(()=>{
                            success();
                        })
                });
            },
            /**
             * 用户昵称
             */
            psNickname(){
                this.qrcode.context.fillStyle = "#ffffff";
                this.qrcode.context.font = "32px Georgia";
                this.qrcode.context.textAlign = "center";
                this.qrcode.context.fillText(this.qrcode.canvas_data.nickname+'的红包',this.qrcode.tpl.width/2,430);
            },
            /**
             * 红包标题
             */
            psTitle(){
                this.qrcode.context.fillStyle = "yellow";
                this.qrcode.context.font = "45px Georgia";
                this.qrcode.context.textAlign = "center";
                this.qrcode.context.fillText(this.qrcode.canvas_data.title,this.qrcode.tpl.width/2,100);
            },
            /**
             * 画二维码
             */
            psQrcode(){
                let wh = 300;
                let x = (this.qrcode.tpl.width / 2) - (wh/2);
                let y = 700;
                this.qrcode.context.drawImage(this.qrcode.qrcode,x,y,wh,wh);
            },
            /**
             * 裁剪二维码头像
             */
            psHeader(){
                let wh = 210;
                let header_x = (this.qrcode.tpl.width / 2) - wh/2;
                let header_y = 175;
                this.circleImg(this.qrcode.header,header_x,header_y,wh/2);
            },
            /**
             * 将一个正方形改成圆形到指定坐标
             * @param ctx
             * @param img
             * @param x
             * @param y
             * @param r
             */
            circleImg(img,x, y, r) {
                this.qrcode.context.save();
                let d =2 * r;
                let cx = x + r;
                let cy = y + r;
                this.qrcode.context.arc(cx, cy,r,0,2*Math.PI);
                this.qrcode.context.clip();
                this.qrcode.context.drawImage(img, x, y, d, d);
                this.qrcode.context.restore();
            }
        }
    }
</script>

<style scoped lang="less" src="./contorl.less"></style>
